<template>
  <div class="product-container">
    <!-- 简约横向导航栏 -->
    <div class="category-menu-container">
      <div
        v-for="item in 3"
        :key="item"
        class="category-item"
        :class="{ active: activeCategory === item.toString() }"
        @click="handleSelect(item.toString())">
        分类{{ item }}
      </div>
    </div>

    <!-- 产品展示网格 -->
    <div class="product-grid">
      <div
        v-for="product in filteredProducts"
        :key="product.id"
        class="product-card"
        @mouseenter="hoverCard = product.id"
        @mouseleave="hoverCard = null">
        <div class="image-container">
          <img
            :src="product.image"
            class="product-image"
            :class="{ 'hover-effect': hoverCard === product.id }"
            @error="handleImageError" />
        </div>
        <div class="product-info">
          <h3 class="product-name">{{ product.name }}</h3>
          <div class="product-price">￥{{ product.price }}</div>
          <p class="product-detail">{{ product.detail }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeCategory: '1',
      hoverCard: null,
      products: [
        { id: 1, category: '1', image: 'https://ts1.tc.mm.bing.net/th/id/R-C.d4d5a9a4bd730844eb4aa274bb395c79?rik=13CNq9%2fww2F0Wg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20230420ac%2f120%2fw1328h1992%2f20230420%2f8dd8-00d8c4823d445eaf9cd6fdc3f01e1b18.jpg&ehk=hux2VJ8T5fSiEZJ4trUunYrHmCVMECOvxb6GaRlqWpE%3d&risl=&pid=ImgRaw&r=0', name: '产品1', price: 100, detail: '这是产品1的详细信息11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111' },
        { id: 2, category: '1', image: 'https://via.placeholder.com/300x200?text=Product+2', name: '产品2', price: 200, detail: '这是产品2的详细信息' },
        { id: 3, category: '2', image: 'https://via.placeholder.com/300x200?text=Product+3', name: '产品3', price: 300, detail: '这是产品3的详细信息' },
        { id: 4, category: '1', image: 'https://via.placeholder.com/300x200?text=Product+4', name: '产品4', price: 150, detail: '这是产品4的详细信息' },
        { id: 5, category: '3', image: 'https://via.placeholder.com/300x200?text=Product+5', name: '产品5', price: 250, detail: '这是产品5的详细信息' },
        { id: 6, category: '2', image: 'https://via.placeholder.com/300x200?text=Product+6', name: '产品6', price: 350, detail: '这是产品6的详细信息' },
      ],
      filteredProducts: [],
    };
  },
  methods: {
    handleSelect(index) {
      this.activeCategory = index;
      this.filteredProducts = this.products.filter(product => product.category === index);
    },
    handleImageError(e) {
      e.target.src = 'https://via.placeholder.com/300x200?text=Image+Error';
    }
  },
  mounted() {
    this.handleSelect('1'); // 默认展示分类1的产品
  },
};
</script>

<style scoped>
.product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 简约导航栏样式 */
.category-menu-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  border-bottom: 1px solid #f0f0f0;
}

.category-item {
  padding: 12px 30px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #666;
  transition: all 0.2s ease;
  position: relative;
}

.category-item:hover {
  color: #333;
}

.category-item.active {
  color: #333;
}

.category-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #333;
}

/* 产品网格布局 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

/* 产品卡片样式 */
.product-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.image-container {
  height: 200px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-image.hover-effect {
  transform: scale(1.03);
}

.product-info {
  padding: 20px;
}

.product-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.product-price {
  font-size: 20px;
  font-weight: 700;
  color: #ff4757;
  margin-bottom: 12px;
}

.product-detail {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
